const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');
// 导入每次删除dist文件夹的插件
const cleanWebpackPlugin = require('clean-webpack-plugin');
// 抽离第三方js文件以及压缩js文件
const webpack = require('webpack');
// 导入抽取CSS的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// 导入压缩CSS的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    entry: {
        // 配置入口节点
        app: path.join(__dirname, './src/main.js'),
        // 把要抽离的第三方包的名称，放到这个数组中  
        vendors1: ['jquery'],
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html',
            // 压缩html代码
            minify: {
                collapseWhitespace: true, // 合并多余的空格
                removeComments: true, // 移除注释
                removeAttributeQuotes: true // 移除 属性上的双引号
            }
        }),
        // 指定删除每次需要删除的文件夹名称
        new cleanWebpackPlugin(['dist']),
        // 压缩js文件
        new webpack.optimize.UglifyJsPlugin({
            compress: { // 配置压缩选项
                warnings: false // 移除警告
            }
        }),
        // 设置为产品上线环境，进一步压缩JS代码
        new webpack.optimize.DedupePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        // 抽离第三方包的Js文件的配置
        new webpack.optimize.CommonsChunkPlugin({
            // 指定要抽离的入口名称
            name: 'vendors1',
            // 将来再发布的时候，除了会有一个 bundle.js ，还会多一个vendors.js 的文件，里面存放了所有的第三方包
            filename: 'js/vendors.js',
        }),
        // 抽取CSS文件
        new ExtractTextPlugin("css/styles.css"),
        // 压缩CSS的插件
        new OptimizeCssAssetsPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader",
                    publicPath: '../' // 指定抽取的时候，自动为我们的路径加上 ../ 前缀
                }),
            },
            {
                test: /\.scss$/,
                // use: ['style-loader', 'css-loader', 'sass-loader']
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader'],
                    publicPath: '../' // 指定抽取的时候，自动为我们的路径加上 ../ 前缀
                }),
            },
            {
                test: /\.(png|gif|bmp|jpg)$/,
                use: ['url-loader?limit=5000&name=images/[hash:8]-[name].[ext]']
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    }
};